<template>
    <div>角色管理</div>
    <ETable v-bind="tableConifg">
        <template #buttons="{ delAll }">
            <el-button type="primary" @click="add">添加</el-button>
            <el-button type="danger" @click="delAll">批量删除</el-button>
        </template>

        <template #operation="{ row, del }">
            <el-button link type="primary" @click="edit(row.id)">修改</el-button>
            <el-button link type="danger" @click="del(row.id)">删除</el-button>
        </template>
    </ETable>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import ETable, { type TableType } from '../../components/ETable.vue';
import { getRoles, delRole, delRoles } from '../../apis/role/role';
import router from '@/router';

const tableConifg: TableType = {
    isSearch: false,
    loadData: getRoles,
    delelte: delRole,
    delelteAll: delRoles,
    columns: [
        {
            prop: 'id',
            label: '序号'
        },
        {
            prop: 'name',
            label: '角色名称'
        },
        {
            prop: 'accountCounts',
            label: '关联账号'
        },
        {
            prop: 'addAccountName',
            label: '创建人'
        },
        {
            prop: 'addTime',
            label: '创建时间'
        },
        { prop: 'operation', slot: true, label: '操作', width: "200" }
    ]
}

const add = () => {
   router.push('/system/role-add')
}
const edit = (id: number) => {
    router.push('/system/role-edit/'+id)
}

</script>

<style scoped lang='less'></style>